import React from 'react'
import { Table, Pagination, Popover } from 'antd'
import '../batchRecord/search.css'
import styles from '@/components/batchRecord/table.scss'
import util from '@/utils'
import colors from '@/constants/colors'

const { Column } = Table

const TemplateTable = (props) => {
  const { data, pageNum, loading, pageSize, total, templateStatusEnum, onDelete, onChangePagination } = props

  const statusColor = {
    1: colors.statusPending,
    2: colors.statusPendSuc,
    3: colors.statusPendFai,
  }

  return (
    <div>
      <Table dataSource={data} loading={loading} pagination={false} rowKey={record => record.id}>
        <Column title="模板内容" align="center" dataIndex="template" width={200} render={(props) => (
          <Popover content={props} trigger="click">
            <div className="single-line">
              {props}
            </div>
          </Popover>
        )} />
        <Column title="字数" align="center" dataIndex="size" width={50} />
        <Column title="状态" align="center" dataIndex="status" width={120} render={(props) =>(
          <span style={{color: statusColor[props]}}>{util.getEnumDesc(templateStatusEnum, props)}</span>
        )} />
        <Column title="添加时间" align="center" dataIndex="createTime" width={150} render={(value) => util.transformTimeStampToString(value)} />
        <Column title="审核时间" align="center" dataIndex="auditTime" width={150} render={(value) => util.transformTimeStampToString(value)} />
        <Column title="操作" align="center" dataIndex="id7" width={100} render={(props, value, index) => (
          <span>
            {/* <a href="javascript:;" onClick={onEdit.bind(props, value, index)}>编辑</a>
            <Divider type="vertical" /> */}
            <a href="javascript:;" onClick={onDelete.bind(props, value, index)}>删除</a>
          </span>
        )} />
      </Table>
      {!!total && <div className={styles["pagination-container"]}>
        <Pagination 
          className={styles["pagination"]} 
          showQuickJumper 
          showTotal={(total, range) => `共${total}条`} 
          pageSize={pageSize} 
          current={pageNum}
          total={total} 
          onChange={onChangePagination} 
        />
      </div>
      }
    </div>
  )
}

export default TemplateTable